<template>
    <div class="root">
        <div class="toSelectTime">
            <el-button type="plain" round style="margin-right: 50px;" @click="updateChart()">年数据</el-button>
            <el-button type="plain" round @click="toSelectMonth">月数据</el-button>
             <el-date-picker v-model="selectmonth" type="month" placeholder="选择月" v-show="monthselect" style="position: absolute; right: 49%" @change="changeMonth"></el-date-picker>
        </div>
        <div class="line" id="line"></div>

    </div>
</template>

<script>
import * as echarts from 'echarts'
import { containsSubstring,formatDateMonth } from "@/tool/tool.js";
export default {
    name: "typeline",
    data(){
        return {
            selectmonth:'2024-01',
            monthselect:false,
            totalData:{},
            newOption:{},
            option : {
             title: {
                text: '交易金额'
                        },
             tooltip: {
               trigger: 'axis'
             },
             legend: {
               data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
             },
             grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
             },
             toolbox: {
               feature: {
                 saveAsImage: {}
               }
             },
             xAxis: {
               type: 'category',
               boundaryGap: true,
               data: []
             },
             yAxis: {
               type: 'value'
             },
             series: [
               
             ]
            }
            } 
            },
            created(){
                this.$echarts = echarts
                
                 
            },
            mounted() {
                 this.$nextTick(() => {
                    this.initChart();
                });     

            },
            methods:{
                changeMonth(){
                    let data = this.totalData;
                    let moneyin = [];
                    let moneyout = [];
                    let selectmonth = formatDateMonth(this.selectmonth)
                    for(let key in data.dayDataIn){
                        console.log(key,selectmonth)
                        if(containsSubstring(key,selectmonth)){
                            moneyin.push(data.dayDataIn[key]);
                        }
                        
                    }
                    for(let key in data.dayDataOut){
                        if(containsSubstring(key,selectmonth)){
                            moneyout.push(data.dayDataOut[key]);
                        }
                    }
                    this.option.series = [];
                    this.option.series.push(
                        {
                            name:"每日支出",
                            type:'line',
                            data:moneyout
                        }
                    )
                    this.option.series.push(
                        {
                            name:"每日收入",
                            type:'line',
                            data:moneyin
                        }
                    )
                    this.option.xAxis.data = [];
                    for (let key in data.dayDataIn){
                         if(containsSubstring(key,selectmonth)){
                            this.option.xAxis.data.push(key);
                        } 
                    }
                    const myChart = this.$echarts.init(document.getElementById('line'));
                    // // 绘制图表
                    myChart.setOption(this.option,true);
                },
                
                updateChart(data = undefined){
                    this.monthselect = false;
                    if(data != undefined){
                        this.totalData = data;
                    }
                    data = this.totalData;
                    // 清空option数据
                    this.option.series = [];
                    this.option.xAxis.data = [];
                    let moneyin = [];
                    let moneyout = [];
                    for(let key in data.monthDataIn){
                        moneyin.push(data.monthDataIn[key]);
                    }
                    for(let key in data.monthDataIn){
                        moneyout.push(data.monthDataOut [key]);
                    }
                    this.option.series.push(
                        {
                            name:"每月支出",
                            type:'line',
                            data:moneyout
                        }
                    )
                    this.option.series.push(
                        {
                            name:"每月收入",
                            type:'line',
                            data:moneyin
                        }
                    )
                    
                    for (let key in data.monthDataIn){
                        this.option.xAxis.data.push(key);
                    }
   
                    
                    
                    const myChart = this.$echarts.init(document.getElementById('line'));
                    // // 绘制图表
                    myChart.setOption(this.option,true);
                },
                toSelectMonth(){
                    this.monthselect = true;
                },
                initChart(){
                    // 基于准备好的dom，初始化echarts实例
                    const myChart = this.$echarts.init(document.getElementById('line'));
                    // 绘制图表
                    myChart.setOption(this.option);
                }
            }
        }
        
</script>

<style scoped>
.toSelectTime{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 50px;
    /* background-color: aquamarine; */
    box-sizing: border-box;
    margin-bottom: 50px;
}
.root{
        width: 100%;
        height:  100%;
        display: flex;
        flex-direction: column;
}
.line{
    width: 100%;
    height:  100%;
}
.lineday{
    width: 100%;
    height:  100%;
}
    
        
</style>

